<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                
                <!-- <el-form-item label="归属AR地标ID" prop="arLandmarkId">
                  <landmark-select :type="3" v-model="ruleForm.arLandmarkId" :defaultTxt="defaultTxt" width='600px' :disabled="onlyLook==1"/>
                </el-form-item> -->
                <el-form-item label="归属AR地标ID" prop="arLandmarkId">
                  <el-input v-model="ruleForm.arLandmarkId" placeholder="请填写归属的AR地标ID" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="广告位名称" prop="adPlaceTitle">
                  <el-input v-model="ruleForm.adPlaceTitle" placeholder="广告位名称" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="广告位位置" prop="adAdress">
                  <el-input v-model="ruleForm.adAdress" placeholder="广告位位置" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="广告位描述" prop="adPlaceIntroduce">
                  <el-input v-model="ruleForm.adPlaceIntroduce" type="textarea" placeholder="广告位描述" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <el-form-item label="广告位价值分析" prop="adValueAnalysis">
                  <el-input v-model="ruleForm.adValueAnalysis" type="textarea" placeholder="广告位价值分析" :autosize="{ minRows: 6, maxRows: 10}" style="width: 600px;" :disabled="onlyLook==1"/>
                </el-form-item>
                <!-- <el-form-item label="定位地址" prop="contractAddress">
                  <el-input v-model="ruleForm.contractAddress" placeholder="请输入地图资源的定位地址"  style="width: 600px;" :disabled="onlyLook==1" @focus="openMap"/>
                </el-form-item> -->
                <el-form-item label="经纬度">
                      <div style="display: inline;padding-right:5px">
                        <el-input v-model="ruleForm.longitude" placeholder="经度" style="width: 250px;" :disabled="onlyLook==1"/>
                      </div>
                      <el-input v-model="ruleForm.latitude" placeholder="纬度" style="width: 255px;" :disabled="onlyLook==1"/>
                      <span style="padding-left:10px"><el-button type="primary" plain @click="openMap">地图选择</el-button></span>
                </el-form-item>
                <!-- <el-form-item label="关联U3D广告位">
                  <u3d-scene-select ref="u3dEle" :defaultTxt="defaultTxt" :type="3" v-model="ruleForm.relationU3dSceneId" width="600px" :disabled="onlyLook==1"/>
                </el-form-item> -->

                <el-form-item label="AR广告位头图" prop="adArImg">
                  <div class="upfileTips" style="display:flex">
                    <upload-file v-if="!id || details" :limit="1" v-model="ruleForm.adArImg" type="img"/>
                    <p>支持JPG、JFPG、PNG等图片格式，文件大小控制在2M以内</p>
                  </div>
                </el-form-item>
                <el-form-item label="AR广告位视频" prop="adArVideo">
                  <div class="upfileTips" style="display:flex">
                    <upload-file v-if="!id || details" :limit="1" v-model="ruleForm.adArVideo" type="video"/>
                    <p>请上传16倍速的MP4视频文件，建议上传广告位位置示意的视频</p>
                  </div>
                </el-form-item>
                <el-form-item>
                    <template>
                        <template v-if="onlyLook==1">
                            <el-button icon="el-icon-back" @click="$router.back()" type="info">返回</el-button>
                            <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="save('ruleForm')">保存</el-button>
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </template>
                </el-form-item>

            </el-form>
            <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="false" width="960px" title="选择地址">
                <MapContainer ref="aMap" :showMap="true" @getPoint="getPoint" :point="defaultPoint"/> 
            </my-dialog>
        </mian-layout>
        
</template>

<script>
import {mapGetters} from 'vuex'
import {
  add_adPlace,
  get_adPlace_detail,
 edit_adPlace,
  getArSceneList
} from '@/api/collext'
import uploadFile from '@/components/public/uploadFile.vue'
import Address from '@/components/public/address.vue'
import u3dSceneSelect from '@/components/public/u3dSceneSelect.vue'
import {mergeObject,filterStr} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
import MapContainer from '@/components/public/MapContainer.vue'
import myDialog from '@/components/public/myDialog';
import landmarkSelect from "@/components/public/landmarkSelect.vue";
export default {
  name: '',
  components:{
    uploadFile,
    Address,
    u3dSceneSelect,
    myBack,
    MapContainer,
    myDialog,
    //landmarkSelect
  },
  data() {
    return {
      ruleForm: {
        arLandmarkId:'',
        adPlaceTitle:'',
        adAdress:'',
        adPlaceIntroduce:'',
        adValueAnalysis:'',
        contractAddress:'',
        latitude:'',
        longitude:'',
        //relationU3dMapId:'',	// U3D地图ID，查询：/boss/arscene/list
        //relationU3dSceneId:'',// U3D场景ID，查询：/boss/arscene/list	
        adArImg:'',
        adArVideo:''
      },
      addressCode:[],
      rules: {},
      defaultTxt:'',
      details:'',
      apiAddressCodes:[],
      id:'',
      onlyLook:'',
      dialogVisible:false,
      defaultPoint:{},
      btnLoading:false
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_adPlace_detail(this.id)
      if(res.success){
        this.details = res.data
        this.ruleForm = mergeObject(this.ruleForm,res.data)
    
        this.defaultPoint.lng = res.data.longitude
        this.defaultPoint.lat = res.data.latitude

      }
    }
  },
  methods: {
    getPoint(obj){
      this.ruleForm.latitude = parseFloat(obj.lat).toFixed(10)
      this.ruleForm.longitude = parseFloat(obj.lng).toFixed(10)
      this.ruleForm.contractAddress = obj.address 
      this.dialogVisible = false
      this.defaultPoint.lng = this.ruleForm.longitude
      this.defaultPoint.lat = this.ruleForm.latitude
    },
    addImg(num){
        if(num==1){
          //this.ruleForm.arLandmarkFiles = [...this.ruleForm.arLandmarkFiles,{fileURl:'',remarks:''}]
          this.ruleForm.arLandmarkFiles.push({fileURl:'',remarks:''})
        }else{
          this.ruleForm.arLandmarkFiles.length>1 && this.ruleForm.arLandmarkFiles.pop()
        }
    },
    // 确定
    save(formName) {
      if(!this.ruleForm.arLandmarkId){
        return this.$message.warning('请输入归属AR地标ID')
      }else if(!this.ruleForm.adPlaceTitle){
        return this.$message.warning('请输入广告位名称')
      }else if(!this.ruleForm.adAdress){
        return this.$message.warning('请输入广告位位置')
      }else if(!this.ruleForm.adPlaceIntroduce){
        return this.$message.warning('请输入广告位描述')
      }else if(!this.ruleForm.adValueAnalysis){
        return this.$message.warning('请输入广告位价值分析')
      }else if(!this.ruleForm.longitude){
        return this.$message.warning('请输入经度')
      }else if(!this.ruleForm.latitude){
        return this.$message.warning('请输入纬度')
      }
      // else if(!this.ruleForm.relationU3dSceneId){
      //   return this.$message.warning('请选择关联的U3D')
      // }
      else if(!this.ruleForm.adArImg || this.ruleForm.adArImg.length<1){
        return this.$message.warning('请上传广告位头图')
      }
      
      //this.btnLoading = true
      if(this.id){  // 编
          edit_adPlace({adPlaceId:this.id,...this.ruleForm}).then(res=>{
            if(res.success){
              this.$message.success('修改成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("修改失败")
            }
            this.btnLoading = false
          })
      }else{  //新增
          // 获取u3d地图id
         // this.ruleForm.relationU3dMapId = this.$refs.u3dEle.getKeyValue('u3dMapId')

          add_adPlace(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("新增失败")
            }
            this.btnLoading = false
          })
      }
      
    },
    getAddress(){
        //  处理地址选择
        const adObj = this.$refs.eleAddress.getCheckedNodes()
        if(!adObj) return
        this.ruleForm.provinceCode = adObj.province.code || ''
        this.ruleForm.provinceName = adObj.province.name || ''
        this.ruleForm.cityCode = adObj.city.code || ''
        this.ruleForm.cityName = adObj.city.name || ''
        this.ruleForm.districtCode = adObj.district.code || ''
        this.ruleForm.districtName = adObj.district.name || ''
    },
    openMap(){
      if(this.addressCode && this.addressCode.length>0){
        this.getAddress()
      }
      this.dialogVisible=true
    },
    clearNoNum(e,prop){
      let o = e.target
      o.value = o.value.replace(/[^\d.]/g,"") //清除"数字"和"."以外的字符
      o.value = o.value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
      o.value = o.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只保留第一个.清除多余的
      this.ruleForm[prop] = o.value
    }
  }
}
</script>

<style lang="scss" scoped>
  .colFlex{
  display: flex;
  .cfItem{
    flex: 1;
    padding: 0 0 0 10px;
  }
  &+.colFlex{
    margin: 10px 0 0 0;
  }
}
.addBtnBox{
  padding: 10px 0 0 0;
}
.upfileTips{
  display: flex;
  p{
    flex: 1;
    display: flex;
    font-size: 12px;
    color: #999;
    align-items: center; 
    line-height: 24px;
  }
}
</style>

<style lang="scss">
  .colFlex textarea{
    height: 148px !important;
  }
</style>


